<template>
  <div class="echart-grid-item">
    <div class="echart-grid-item-title">
      <img :src="icon" :alt="title" />
      {{ title }}
    </div>
    <div class="echart-grid-item-data">{{ value }}</div>
    <div class="echart-grid-item-yesterday">
      同比昨天
      <span :class="{ 'text-green': isIncrease, 'text-red': !isIncrease }">
        {{ isIncrease ? "▲" : "▼" }} {{ trend }}%
      </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  icon: {
    type: String,
    required: true,
  },
  value: {
    type: String,
    required: true,
  },
  trend: {
    type: String,
    required: true,
  },
  isIncrease: {
    type: Boolean,
    default: false,
  },
})
</script>

<style scoped>
.echart-grid-item {
  background: #ffffff;
  box-shadow: 0px 2px 8px 0px rgba(156, 147, 155, 0.18);
  border-radius: 18px;
  padding: 20px;
  transition: transform 0.3s ease;
}

.echart-grid-item:hover {
  transform: translateY(-5px);
}

.echart-grid-item-title {
  display: flex;
  align-items: center;
  color: #606266;
  font-size: 14px;
  margin-bottom: 10px;
}

.echart-grid-item-title img {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.echart-grid-item-data {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.echart-grid-item-yesterday {
  font-size: 12px;
  color: #909399;
}

.text-green {
  color: #52c41a;
}

.text-red {
  color: #ff4d4f;
}
</style>
